<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>自定义指令</title>
</head>
<body>
    <!-- 
        需求：自定义2个指令
            1.功能类似于v-text，但转换成全大写 v-upper-text
            2.功能类似于v-text，但转换成全小写 v-lower-text
            3.v-random：长度为length的随机数生成的指令
     -->
   <div id="root">
       <h2 v-upper-text='title'></好>
       <h2 v-lower-text='title'></好>
       <h2 v-random='length'></好>
   </div> 
   <script>
       //定义一个全局指令，指令不能用大写命名
       Vue.directive('upper-text',function(el,binding){
           console.log(el,binding);
           //el就是一个真实的dom
           el.innerText+=binding.value.toUpperCase();
       });
       new Vue({
            el:'#root',
            data(){         
                return {
                    title:'baidu',
                    length:4
                }
            },
            directives:{
                //定义一个局部指令，只能在#root中使用
                'lower-text'(el,binding){
                    el.innerText+=binding.value.toLowerCase();
                },
                random(el,binding){
                    el.innerText = binding.value;
                }
            }
        })
   </script>
</body>
</html>